<template>
  <div class="detail" v-if="product">
    <van-tabs scrollspy sticky>
      <van-tab title="商品">
        <van-swipe @change="onChange">
          <van-swipe-item
            v-for="(item, index) in product.slider_image"
            :key="index"
          >
            <img :src="item" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }}/{{ swipeTotal }}
            </div>
          </template>
        </van-swipe>

        <div class="container">
          <div class="storeInfo">
            <div class="store_first">
              <div class="price"><span>¥</span>{{ product.price }}</div>
              <div class="vip_price">¥{{ product.vip_price }}</div>
            </div>
            <div class="store_name">{{ product.store_name }}</div>
            <div class="store_second">
              <div>原价:¥{{ product.ot_price }}</div>
              <div>库存:{{ product.stock }}</div>
              <div>销量:{{ product.sales }}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div class="commentBox">
          <div class="comment">
            <div class="container">
              <div class="comment_left">用户评价(0)</div>
              <div class="comment_right">
                <span>0%</span>好评率<span>></span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐">
        <div class="good_list_rec">
          <img
            src=""
          />
          <div>优品推荐</div>
          <img
            src=""
          />
        </div>
        <div class="container">
          <div class="good_list">
            <van-swipe class="my-swipe" indicator-color="#e93323">
              <van-swipe-item v-for="(item, index) in good_list" :key="index">
                <van-grid :column-num="3">
                  <van-grid-item v-for="value in item.goodInfo" :key="value.id">
                    <van-image :src="value.image"></van-image>
                    <div class="good_name">{{ value.store_name }}</div>
                    <div class="good_price">¥{{ value.price }}</div>
                  </van-grid-item>
                </van-grid>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </van-tab>
      <van-tab title="详情">
        <div class="introBox">
          <div class="intro">产品介绍</div>
        </div>
        <div class="description" v-html="product.description">
          {{ product.description }}
        </div>
      </van-tab>
    </van-tabs>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        :icon="like ? 'like' : 'like-o'"
        text="收藏"
        @click="shouCang"
        color="#f44939"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="gouWu" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="buy" />
    </van-goods-action>

    <van-sku
      v-model="showCart"
      :sku="sku"
      :goods="goods"
      @add-cart="onAddClick"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions } from "vuex";
export default {
  name: "Detail",
  data() {
    return {
      current: 0,
      swipeTotal: 0,
      product: null,
      good_list: null,
      showCart: false,
      sku: {
        //初始化demo数据
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", //属性名称
            k_id: "1", //属性的ID值 唯一 在当前产品里面唯一
            k_s: "s1", //属性的k_s值 对应list里面组合键名
            v: [
              //颜色属性可用值列表
              {
                id: "30349", //属性ID
                name: "红色", //属性名
                //属性图片，默认只有第一行属性有
                imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
              },
              {
                id: "1215",
                name: "白色",
                imgUrl: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
              },
            ],
          },
          {
            k: "尺寸",
            k_id: "2",
            k_s: "s2",
            v: [
              {
                id: "1193",
                name: "1",
              },
              {
                id: "1194",
                name: "2",
              },
            ],
            count: 2,
          },
        ],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [
          {
            id: 2259,
            price: 120, //价格
            s1: "1215", //对应属性列表里面 k_s 等于s1的属性id值
            s2: "1193",
            stock_num: 20, //库存
            goods_id: 946755, //产品ID
          },
          {
            id: 2260,
            price: 110,
            s1: "1215",
            s2: "1194",
            stock_num: 2,
            goods_id: 946755,
          },
          {
            id: 2257,
            price: 130,
            s1: "30349",
            s2: "1193",
            stock_num: 40,
            goods_id: 946755,
          },
          {
            id: 2258,
            price: 100,
            s1: "30349",
            s2: "1194",
            stock_num: 50,
            goods_id: 946755,
          },
        ],
        price: 0,
        stock_num: 227, // 商品总库存
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
      },
      messageConfig: {
        // 数据结构见下方文档
      },
      like: false,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    shouCang() {
      if (this.like) {
        this.$axios
          .post("api/collect/del", {
            category: "product",
            id: this.product.id,
          })
          .then((d) => {
            // console.log("like==>",d)
            if (d.data.status == 200) {
              Toast("取消收藏");
            }
            // console.log("取消", this.product);
          });
      } else {
        this.$axios
          .post("api/collect/add", {
            category: "product",
            id: this.product.id,
          })
          .then((d) => {
            // console.log("like==>",d)
            if (d.data.status == 200) {
              Toast("收藏成功");
            }
            // console.log("收藏", this.product);
          });
      }
      this.like = !this.like;
    },
    gouWu() {
      this.$router.push("/cart");
    },
    buy() {
      Toast("立即购买");
    },
    addCart() {
      let t = localStorage.getItem("token");
      if (t) {
        this.showCart = true;
      } else {
        Toast("请登录");
        this.$router.push("/login");
      }
    },
    onAddClick(data) {
      this.showCart = false;
      this.$toast("添加购物车成功");
      console.log("onAddClick==>", data);
      let selectedNum = data.selectedNum;
      let productId = "";
      if (data.selectedSkuComb && data.selectedSkuComb.goods_id) {
        productId = data.selectedSkuComb.goods_id;
      } else {
        productId = this.product.id;
      }
      let uniqueId = "";
      if (data.selectedSkuComb && data.selectedSkuComb.id) {
        uniqueId = data.selectedSkuComb.id;
      }
      this.$axios
        .post("api/cart/add", {
          cartNum: selectedNum, //无属性商品已有
          new: 0,
          productId: productId,
          uniqueId: uniqueId,
        })
        .then((d) => {
          console.log(d);
        });
    },
    ...mapActions(["getLikeList"]),
  },
  props: {
    id: String,
  },
  computed: {
    likeArr: function () {
      return this.$store.getters.likeList;
    },
  },
  created() {
    this.getLikeList();
    console.log("Detail==>", this.likeArr);
    // console.log(this.id);
    // console.log(typeof(this.likeArr))
    if (this.likeArr) {
      for (let i = 0; i < this.likeArr.length; i++) {
        if (this.likeArr[i] == this.id) {
          // console.log("已收藏")
          this.like = true;
        }
      }
    }

    this.$axios.get("/api/product/detail/" + this.id).then((d) => {
      console.log("Detail==>", d);
      if (d.data.status == 200) {
        this.product = d.data.data.storeInfo;
        let goodArr = [];
        for (let i = 0; i < d.data.data.good_list.length; i += 6) {
          let o = {
            goodInfo: d.data.data.good_list.slice(i, i + 6),
          };
          goodArr.push(o);
        }
        this.good_list = goodArr;
        // console.log("this.good_list==>", this.good_list);
        this.swipeTotal = d.data.data.storeInfo.slider_image.length;

        // 加入购物车属性
        let listValue = d.data.data.productValue;
        console.log("listValue==>",listValue)
        let arrs = d.data.data.productAttr;
        if (listValue.length != 0) {
          //sku 数据转换
          let id = 1;
          let idobj = {};
          let ssk = 1;
          this.sku.list = [];
          //获取产品属性里面第一个值默认图片
          this.goods.picture = listValue[Object.keys(listValue)[0]].image;
          //循环产品属性 组装购物车 属性tree
          this.sku.tree = arrs.map((atr, ads) => {
            let va = atr.attr_value.map((at, index) => {
              id++;
              idobj[at.attr] = id;
              let attrs = {
                id: id,
                name: at.attr,
              };
              if (ads < 1) {
                attrs.imgUrl = listValue[Object.keys(listValue)[index]].image;
              }
              return attrs;
            });
            var ks = "s" + ssk;
            ssk++;
            return {
              k: atr.attr_name,
              k_id: atr.attr_name,
              v: va,
              k_s: ks,
            };
          });
          //循环产品属性组合,组装sku 列表
          for (let key in listValue) {
            let v = listValue[key];
            let keys = key.split(",");
            this.sku.list.push({
              id: v.unique,
              price: v.price * 100, //价格
              s1: idobj[keys[0]],
              s2: idobj[keys[1]],
              stock_num: v.stock, //库存
              goods_id: v.product_id,
              imgUrl: v.image,
            });
            if (this.sku.price == 0) {
              this.sku.price = this.sku.list[0].price / 100;
            }
          }
        } else {
          this.sku.price = this.product.price;
          this.sku.none_sku = true;
          this.sku.stock_num = this.product.stock;
          this.goods.picture = this.product.image;
          // this.sku.list.push({
          //   id: this.product.id,
          //   price: this.product.price * 100,
          //   stock_num: this.product.stock,
          //   goods_id: this.product.id,
          //   imgUrl: this.product.image,
          // });
        }
      } else {
        this.$toast("信息加载失败");
      }
    });
  },
};
</script>

<style lang="less">
.detail {
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  padding-bottom: 3rem;
  overflow: hidden;
  .container {
    padding: 0px 1rem;
  }
  & > .van-swipe {
    height: 23rem;
  }
  .van-swipe-item {
    text-align: center;
    background-color: white;
    img {
      height: 23rem;
    }
  }
  .storeInfo {
    margin-top: 1.5rem;
    padding-bottom: 0.6rem;
    .store_first {
      display: flex;
      align-items: baseline;
      .price {
        letter-spacing: 1px;
        font-size: 1.5rem;
        color: #fc4141;
        span {
          font-size: 1rem;
        }
      }
      .vip_price {
        margin-left: 1rem;
        font-size: 0.9rem;
        position: relative;
        &:after {
          content: "";
          background: url();
          height: 0.8rem;
          width: 2rem;
          position: absolute;
          top: 1px;
          background-repeat: no-repeat;
          background-size: 1.8rem 0.8rem;
        }
      }
    }
    .store_name {
      font-size: 1rem;
      margin: 0.4rem 0rem;
    }
    .store_second {
      display: flex;
      font-size: 0.3rem;
      justify-content: space-between;
      color: #898989;
    }
  }
  .commentBox {
    padding: 0.6rem 0rem;
    background-color: #efefef;
    .comment {
      background-color: #fff;
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 0.85rem;
      .container {
        display: flex;
        .comment_left {
        }
        .comment_right {
          margin-left: auto;
          color: #898989;
          span:nth-child(1) {
            color: #fc4141;
          }
          span:nth-child(2) {
            margin-left: 0.3rem;
          }
        }
      }
    }
  }
  .van-goods-action {
    z-index: 1000;
  }
  .good_list_rec {
    display: flex;
    justify-content: space-between;
    width: 8rem;
    align-items: center;
    margin: 0 auto;
    padding: 0.9rem 0rem;
    color: #fc4141;
    img {
      height: 1rem;
      width: 1rem;
    }
  }
  .good_list {
    .van-grid-item {
      overflow: hidden;
    }
    .my-swipe {
      height: 20rem;
      .van-image {
        height: 6rem;
        width: 6rem;
        img {
          height: 100%;
        }
      }
      .good_name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 0.85rem;
        margin-top: 0.3rem;
      }
      .good_price {
        margin-top: 0.2rem;
        font-size: 0.85rem;
        color: #fc4141;
      }
    }
    .van-grid-item__content {
      padding: 0.4rem 0.1rem;
    }
  }
  .van-swipe__indicators {
    .van-swipe__indicator {
      background-color: #5f5f5f;
    }
  }
  .introBox {
    padding-top: 0.6rem;
    background-color: #efefef;
    .intro {
      background-color: white;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      font-size: 0.9rem;
    }
  }
  .description {
    background-color: #efefef;
    overflow: hidden;
    padding-bottom: 2rem;
    width: 100vw;
    .attributes-list {
      background-color: #efefef;
      padding: 0px !important;
      li {
        background-color: #efefef;
        width: calc(~"100vw - 2rem") !important;
        padding-left: 1rem !important;
      }
    }
    img {
      width: 100%;
    }
    div {
      width: 100% !important;
      height: auto !important;
    }
  }
  .van-sku-header {
    img {
      object-fit: contain !important;
    }
  }
  .van-tabs--line .van-tabs__wrap {
    height: 50px;
  }
  .van-sticky {
    position: fixed;
    width: 100%;
  }
}
</style>